/*
 * @Date: 2025-06-13 11:12:23
 * @Auth: 463997479@qq.com
 * @LastEditors: 463997479@qq.com
 * @LastEditTime: 2025-10-05 18:31:09
 * @FilePath: \corpus\src\pages\Home\DeptHome.tsx
 */
/*
 * @Date: 2025-06-13 11:12:23
 * @Auth: 463997479@qq.com
 * @LastEditors: 463997479@qq.com
 * @LastEditTime: 2025-06-17 15:31:47
 * @FilePath: \corpus\src\pages\Home\index.tsx
 */
import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';

import Category from '@/components/Category';
import type { ListItem } from '@/services/ant-design-pro/typings';
import { PlusOutlined, SearchOutlined } from '@ant-design/icons';
import { PageContainer } from '@ant-design/pro-components';
import { history, useModel } from '@umijs/max';
import { Col, Pagination, Row, Spin } from 'antd';
import ApplyAuthKnowledge from '../AuthKnowledge/ApplyAuthKnowledge';
import List from './component/List';
import EditAngent from './EditAngent';
import EditCorpus from './EditCorpus';
import hooks from './hooks/useHooks';
import styles from './index.less';

const Home: React.FC = () => {
  const {
    getData,
    total,
    data,
    setType,
    setDetail,
    setCorpuVisible,
    formCorpus,
    editKnowledgeContent,
  } = hooks.useContainer();
  const { name } = useModel('useTree', (model) => {
    return {
      name: model.name,
    };
  });
  useEffect(() => {
    getData.run({ current: 1, pageSize: 10, type: 'bm' });
  }, [name]);

  const { getRole } = useModel('useUser', (model) => {
    return {
      getRole: model.getRole,
    };
  });

  const [value, setValue] = useState('');

  const AddContent = () => {
    return (
      <>
        <div
          onClick={() => {
            formCorpus.resetFields();
            setType('bm');
            setDetail({});
            setCorpuVisible(true);
          }}
          className={styles.wrapperAddContent}
        >
          <div
            style={{
              width: '100%',
              display: 'flex',
              flexDirection: 'column',
              alignItems: 'center',
            }}
          >
            <div className={styles.wrapperAddContentCon}>
              <PlusOutlined style={{ color: '#1d498b', fontSize: '20.0px' }} />
            </div>
            <div
              style={{
                color: '#1d498b',
                textAlign: 'center',
                marginTop: '10.0px',
                fontSize: '20.0px',
              }}
            >
              新增
            </div>
          </div>
        </div>
      </>
    );
  };

  const refContent = useRef<any>();

  const [height, setHeight] = useState(refContent?.current?.clientHeight);

  useLayoutEffect(() => {
    if (total !== 0) {
      setHeight(refContent?.current.clientHeight);
    }
  }, [total]);

  const handleUpContent = (val: Record<any, any>) => {
    editKnowledgeContent.run({ ...val });
  };

  return (
    <PageContainer
      header={{
        title: false,
        ghost: true,
      }}
      className={styles.detailWrap}
    >
      <div style={{ display: 'flex' }}>
        {getRole('admin:upload') && (
          <div className={styles.wrapperLeft}>
            <Category height={height} />
          </div>
        )}

        <div ref={refContent} className={styles.wrapperRight}>
          <div className={styles.wrapperContent}>
            <div className={styles.titleContent}>
              <div className={styles.knowledgeContent}>部门知识库</div>
              <div className={styles.knowledgeSearch}>
                <div className={styles.knowledge}>
                  <input
                    onInput={(val: any) => {
                      const value = val.target.value;
                      setValue(value);
                    }}
                    placeholder="请输入内容"
                  />
                  <div
                    onClick={() => {
                      getData.run({ current: 1, pageSize: 10, name: value, type: 'bm' });
                    }}
                    className={styles.search}
                  >
                    <SearchOutlined
                      color="#ffffff"
                      style={{ color: '#FFFFFF', fontSize: '20.0px' }}
                    />
                  </div>
                </div>
              </div>
            </div>
            <Spin spinning={getData.loading}>
              <Row gutter={20} className={styles.wrapper}>
                {false && (
                  <Col md={24} lg={12} xl={8} xxl={6} className={styles.addWrap}>
                    <AddContent />
                  </Col>
                )}
                {data?.data?.map((item: ListItem, index: number) => {
                  return (
                    <List
                      handleClick={(val: any) => {
                        history.push(
                          {
                            pathname: '/knowledge/file3',
                          },
                          { knowledgeId: val.id, type: val.type },
                        );
                      }}
                      handleUp={handleUpContent}
                      item={item}
                      key={index}
                    />
                  );
                })}
              </Row>
            </Spin>

            <div className={styles.footer}>
              <Pagination
                size="small"
                showQuickJumper
                defaultCurrent={1}
                total={data?.total ?? 0}
                onChange={(val) => {
                  getData.run({ current: val, pageSize: 10, name: value, type: 'bm' });
                }}
              />
            </div>

            <EditCorpus />
            <EditAngent />
            <ApplyAuthKnowledge />
          </div>
        </div>
      </div>
    </PageContainer>
  );
};

export default () => {
  return (
    <hooks.Provider>
      <Home />
    </hooks.Provider>
  );
};
